<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&amp;ak=980idNaKeAWXupputcjVVNFWipTGPPLl"></script>
    

    <title>地点打卡</title>
    <style>
        .title {
          height: 44px;
          display: flex;
          align-items: center;
          font-size: 17px;
          color: #030303;
        }
    
        .back {
          width: 12px;
          height: 21px;
          margin-left: 10px;
        }
    
        h4 {
          flex: 1;
          text-align: center;
        }
    
        #allmap {
          width: 100%;
          height: 550px;
        }
    
        .circle {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background: #fafafa;
          text-align: center;
          margin: 80px auto;
          font-size: 12px;
          box-shadow: 0 0 0 15px rgba(48, 82, 175, 0.507),
            0 0 0 30px rgba(113, 115, 185, 0.3),
            0 0 0 45px rgba(142, 144, 190, 0.1);
        }
    
        .time {
          padding-top: 20px;
          font-size: 14px;
        }
    </style>
    
    
</head>

<body>
    <div class="title">
        
        <h4>地点打卡</h4>`
  </div>
  <div id="allmap"></div>
  <div class="circle " onclick="punch()">
        <div class="time"></div>
        <div>地点打卡</div>
  </div>
  <script type="text/javascript">
    var time = document.querySelector('.time')
    var myDate = new Date();
    time.innerHTML = myDate.getHours() + ':' + myDate.getMinutes(); // 获取当前时间
    
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    var pointAttendance
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function (r) {
         if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk); // 标出自己的当前所在地
                map.panTo(r.point); // 地图中心移动到自己的当前位置
                point = new BMap.Point(r.point.lng, r.point.lat); // 获取自己当前位置经纬度
    
                var coordinate = "117.21084309, 39.1434299";// 设置考勤点经纬度 
                var arr = coordinate.split(",");// 切割经纬度
                var lon = arr[0];
                var lat = arr[1];
                pointAttendance = new BMap.Point(lon, lat);
                var circle = new BMap.Circle(pointAttendance, 500, { // 考勤地点范围
                      fillColor: "blue", // 圆形颜色
                      strokeWeight: 1,
                      fillOpacity: 0.2,
                      strokeOpacity: 0.2
                });
                map.addOverlay(circle);
                var r = new BMap.Marker(pointAttendance);
                map.addOverlay(r); // 标出考勤点的位置
             } else {
                alert('failed' + this.getStatus());
              }
      }, { enableHighAccuracy: true })
    
    // 签到
    function signIn() {
        var distance = map.getDistance(point, pointAttendance).toFixed(2);
        if (distance <= 500) {
          this.GetLocation()
          alert("签到成功")
        } else {
          alert("超出考勤地点范围，签到失败")
        }
    }
    
    // 地址逆解析
    function GetLocation() { 
        var geoc = new BMap.Geocoder();
        geoc.getLocation(point, function (rs) {// 获取当前定位所在详细地址
                var addComp = rs.addressComponents;
                var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                alert("您已在" + address + "签到成功")
        });
    }
    
    // 点击签到
    function punch() {
        this.signIn()
    }
    </script>
    
    
  
</body>
</html>
